/* 
* 缩小版 左侧拖拽菜单
*/
import React from 'react';
import { Spin, Popover, Row, Col } from 'antd';

import ScrollBarLayout from '@/components/ScrollBarLayout';
import MyIcon from '@/components/MyIcon';

import cls from 'classnames';
import './styles.less';

interface IPaneComponent {
    nodeList: Record<string, any>[];
}
export const NarrowPane: React.FC<IPaneComponent> = ({ nodeList }) => {

    const prefix = 'design-narrow-pane-';



    return (
        <div className={cls(prefix + 'layout')}>
            <Spin spinning={nodeList && nodeList?.length > 0 ? false : true}>
                <ScrollBarLayout style={{ padding: '0rem .5rem' }}>
                    {
                        nodeList &&
                        nodeList?.length > 0 &&
                        nodeList?.map(item => {
                            return (
                                <Popover
                                    trigger={'click'}
                                    placement='right'
                                    content={
                                        renderIcon(item?.dataList)
                                    }
                                    key={item?.id}
                                >
                                    <div className={cls(prefix + 'icon')}>
                                        <MyIcon type={'icon-pintu'} />
                                    </div>
                                </Popover>
                            )
                        })
                    }
                </ScrollBarLayout>
            </Spin>
        </div>
    )
}


const renderIcon = (iconList: any[]) => {
    const onDrag = (event: React.DragEvent<HTMLAnchorElement>, node: any) => {
        event.dataTransfer.setData('Text', JSON.stringify(node.data));
    };
    return (
        <Row>
            {iconList && iconList.length > 0
                ? iconList.map(
                    (iconItem: any, iconIndex: any) => {
                        let length = iconList?.length
                        return (
                            <Col
                                key={`${iconItem.name}_${iconIndex}`}
                                span={length < 4 ? 24 / length : 6}
                                className={cls('ivr-pane-col')}
                            >
                                <div>
                                    <a
                                        key={iconIndex}
                                        title={iconItem.name}
                                        className={cls('ivr-pane-icon')}
                                        draggable={true}
                                        onDragStart={(ev) => {
                                            onDrag(ev, iconItem);
                                        }}
                                        style={{
                                            color: iconItem.data.iconColor,
                                        }}
                                    >
                                        <i
                                            style={{
                                                fontSize: '24px',
                                                fontFamily: 'kettle',
                                            }}
                                            className="kettle"
                                        >
                                            {iconItem.data.icon}
                                        </i>
                                    </a>
                                </div>
                                <div
                                    className={cls('ivr-pane-icon-title')}
                                >
                                    {iconItem.name}
                                </div>
                            </Col>
                        );
                    },
                )
                : null}
        </Row>
    )
}